<template>
  <div class="outer">
   <h1>App</h1>
     <List @atguigu='getListData'/>
   
  </div>
</template>

<script>
import _ from 'lodash'
import List from './components/List.vue'
export default {
name:'App',
components:{
  List
},
data(){
  return{
    list:[]
  }
},
methods:{
  //自定义事件的回调函数
  getListData(list){
    //自定义事件主要用来接收子组件的传参(子向父传值)
      //1.我们拿到值以后可以保存在自己的data中,data中尽量保存一个新的值(需要拷贝)
      // this.list = [...list];
      //2.如果数据比较复杂,我们需要对数据进行深拷贝(使用lodash的包提供的方法)
    this.list=_.cloneDeep(list)

    // 判断是否是深拷贝
    console.log(this.list[0]===list[0]);
  }
}
}
</script>

<style scoped>
.outer{
  height: 400px;
  background: yellowgreen;
}
</style>